import Dep from "../dep/index.js"
import { observer } from "./observe.js"

export default function defineReactive(data, key, value) {
    // 拿到子对象(数组)的ob
    let childOb = observer(value)
    // 每个key对应一个Dep
    const dep = new Dep()
    // console.log("响应式拦截：", key, value)
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get() {
            if (Dep.target) {
                dep.depend()
                // 收集子对象(数组) 本身的依赖 
                if(childOb) childOb.dep.depend()
            }
            console.log("getter operator", key)
            return value
        },
        set(newVal) {
            if (value === newVal) return
            value = newVal
            // 首先只处理对象的形式
            // 值更新了 也需要更新对应的childOb 因为如果newVal是一个数组
            // 那么之前的childOb就需要被修改 否则我们拿到的childOb一直都会是初始化时候的childOb
            // 这样就会导致新赋值的数组收集不到依赖 从而不会触发全局渲染Watcher的更新
            childOb = observer(value)
            console.log("setter operator", key)
            dep.notify()
        }
    })
}